<template>
  <div class="app-container" style="height: 100vh;">
    <el-tabs v-model="activeTab" type="card" style="margin-bottom: 10px;">
      <el-tab-pane label="库位浏览" name="locationView"></el-tab-pane>
      <el-tab-pane label="仓库设置" name="warehouseSetting"></el-tab-pane>
    </el-tabs>

    <!-- 库位浏览 -->
    <div v-if="activeTab === 'locationView'" style="height: calc(100vh - 60px);">
          <div style="margin-bottom: 10px; display: flex; gap: 10px;">
            <el-select v-model="filterWarehouseId" placeholder="按仓库筛选" style="width: 180px;">
              <el-option v-for="w in warehouseList" :key="w.id" :label="w.name" :value="String(w.id)" />
            </el-select>
            <el-select v-model="filterLocationId" placeholder="按库位筛选" style="width: 180px;">
              <el-option v-for="l in allLocationList" :key="l.id" :label="l.locationName" :value="l.id" />
            </el-select>
            <el-select v-model="filterProductId" placeholder="按产品筛选" style="width: 180px;">
              <el-option v-for="p in allProductOptions" :key="p.id" :label="p.productName" :value="p.id" />
            </el-select>
            <el-button @click="resetLocationFilter">重置</el-button>
          </div>
          <el-table
            :data="filteredLocationProductList"
            style="width: 100%"
            height="600"
            :default-sort="{ prop: 'drawingNumber', order: 'ascending' }"
          >
            <el-table-column prop="warehouseName" label="仓库" />
            <el-table-column prop="locationName" label="库位" />
            <el-table-column prop="productName" label="产品" />
            <el-table-column prop="drawingNumber" label="图号" sortable />
            <el-table-column prop="version" label="版本" />
            <el-table-column prop="internalVersion" label="内版本" />
            <el-table-column prop="quantity" label="数量" />
          </el-table>
        </div>

    <!-- 仓库设置（原布局） -->
    <div v-else style="height: calc(100vh - 60px);">
    <div class="split-container" style="display: flex; height: 100%;">
      <!-- 左侧仓库列表 -->
      <div :style="{width: leftWidth + 'px', minWidth: '200px', maxWidth: '600px'}">
        <div style="margin-bottom: 10px;">
          <el-button type="primary" plain icon="Plus" @click="handleAddWarehouse" v-hasPermi="['scm:inventoryWarehouse:add']">新增仓库</el-button>
        </div>
        <el-table
          :data="warehouseList"
          highlight-current-row
          @current-change="handleWarehouseSelect"
          :row-key="row => row.id"
          height="600"
          style="width: 100%">
          <el-table-column prop="name" label="仓库/客户名称" />
          <el-table-column prop="address" label="客户全名" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary"   size="small" @click.stop="handleEditWarehouse(scope.row)" v-hasPermi="['scm:inventoryWarehouse:edit']">编辑</el-button>
              <el-button link type="danger"  size="small" @click.stop="handleDeleteWarehouse(scope.row)" v-hasPermi="['scm:inventoryWarehouse:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 拖拽分割条 -->
      <div
        class="split-bar"
        @mousedown="startDrag"
        style="width: 6px; cursor: col-resize; height: 100%; z-index: 10;"
      ></div>
       <!-- 中间库位信息 -->
      <div style="flex: 1; min-width: 300px;">
        <div style="margin-bottom: 20px;">
          <el-button type="success" plain icon="Plus" @click="handleAddLocation" :disabled="!selectedWarehouse" v-hasPermi="['scm:inventoryLocation:add']">新增库位</el-button>
          <span v-if="selectedWarehouse" style="margin-left: 20px;">当前仓库：{{ selectedWarehouse.name }}</span>
        </div>
        <el-table
          :data="locationList"
          v-loading="locationLoading"
          style="width: 100%"
          height="600"
          @row-click="handleLocationSelect"
          :empty-text="selectedWarehouse ? '暂无库位' : '请先选择仓库'">
          <el-table-column prop="locationName" label="库位名称" />
          <el-table-column prop="locationCode" label="库位编码" />
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary"  size="small"  @click.stop="handleEditLocation(scope.row)" v-hasPermi="['scm:inventoryLocation:edit']">编辑</el-button>
              <el-button link type="danger"  size="small"  @click.stop="handleDeleteLocation(scope.row)" v-hasPermi="['scm:inventoryLocation:remove']">删除</el-button>
            </template>
          </el-table-column>
        
        </el-table>
      </div>

        <!-- 拖拽分割条（右） -->
      <div
      class="split-bar"
      @mousedown="startDragRight"
      style="width: 6px; cursor: col-resize; height: 100%; z-index: 10;"
      ></div>
        <!-- 右侧产品列表区 -->
      <div style="flex: 1; min-width: 300px; background: #fafbfc; padding: 10px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
          <span style="font-weight: bold;">库位关联产品列表</span>
          <div>
            <span v-if="selectedLocation" style="margin-right: 16px; color: #666;">
              当前库位：{{ selectedLocation.locationName }}
            </span>
            <el-button type="primary" icon="Plus" @click="openProductDialog" :disabled="!selectedLocation">新加产品</el-button>
          </div>
        </div>
        <el-table
            :data="productList"
            style="width: 100%"
            height="600"
            :empty-text="selectedLocation ? '暂无关联产品' : '请先选择库位'">
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="drawingNumber" label="图号" />
            <el-table-column prop="version" label="版本" />
            <el-table-column prop="internalVersion" label="内版本" />
            <el-table-column prop="quantity" label="数量" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary"  size="small" @click="editProductLocation(scope.row)">编辑</el-button>
              <el-button link type="danger"  size="small" @click="deleteProductLocation(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>


    <div class="split-container" style="display: flex; height: 100%;"></div>  
    </div>

      <!-- 仓库编辑弹窗 -->
      <el-dialog :title="warehouseDialogTitle"  v-model="warehouseDialogVisible" width="400px" append-to-body>
        <el-form :model="warehouseForm" :rules="warehouseRules" ref="warehouseForm" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="warehouseForm.name" />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="warehouseForm.address" />
          </el-form-item>
          <el-form-item label="联系人" prop="contactPerson">
            <el-input v-model="warehouseForm.contactPerson" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="warehouseForm.phone" />
          </el-form-item>
          <el-form-item label="关联客户" prop="customerId">
            <el-select v-model="warehouseForm.customerId" placeholder="请选择客户" filterable>
              <el-option
                v-for="item in customerOptions"
                :key="item.id"
                :label="item.nickname + ' : ' + item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitWarehouseForm">确 定</el-button>
          <el-button @click="warehouseDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 库位编辑弹窗 -->
      <el-dialog :title="locationDialogTitle" v-model="locationDialogVisible" width="400px" append-to-body>
      <el-form :model="locationForm" :rules="locationRules" ref="locationForm" label-width="80px">
        <el-form-item label="库位名称" prop="locationName">
          <el-input v-model="locationForm.locationName" />
        </el-form-item>
        <el-form-item label="库位编码" prop="locationCode">
          <el-input v-model="locationForm.locationCode" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="locationForm.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitLocationForm">确 定</el-button>
        <el-button @click="locationDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新加产品弹窗部分 -->
    <el-dialog title="新加产品到库位" v-model="productDialogVisible" width="500px" append-to-body>
      <el-form :model="productForm" ref="productFormRef" label-width="100px">
        <el-form-item label="产品图号" prop="drawingNumber">
          <el-select v-model="productForm.drawingNumber" placeholder="请选择产品图号" filterable @change="onDrawingNumberChange">
            <el-option v-for="item in drawingNumberOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品版本" prop="version">
          <el-select v-model="productForm.version" placeholder="请选择产品版本" filterable @change="onVersionChange">
            <el-option v-for="item in versionOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品内版本" prop="internalVersion">
          <el-select v-model="productForm.internalVersion" placeholder="请选择产品内版本" filterable @change="onInternalVersionChange">
            <el-option v-for="item in internalVersionOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="productForm.productName" disabled />
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-input v-model="productForm.priority" type="number" placeholder="优先级" />
        </el-form-item>
        <el-form-item label="库位容量" prop="locationAmount">
          <el-input v-model="productForm.locationAmount" type="number" placeholder="库位容量" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="productForm.remark" type="text" placeholder="备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitProductForm">保存</el-button>
        <el-button @click="productDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { listWarehouse, addWarehouse, updateWarehouse, delWarehouse } from "@/api/scm/warehouse";
import { listLocation, addLocation, updateLocation, delLocation } from "@/api/scm/location";
import { listProductLocation, addProductLocation } from "@/api/scm/scmInventoryProductLocation";
import { updateProductLocation, delProductLocation } from "@/api/scm/scmInventoryProductLocation";
import { listScmProducts } from "@/api/scm/scmProducts";
import { listCustomer } from "@/api/scm/customer";
import { Edit, Delete } from '@element-plus/icons-vue';
export default {
  name: "inventoryWarehouse",
  components: { Edit, Delete },
  data() {
    return {
      activeTab: 'locationView',
      // 浏览筛选相关
      filterWarehouseId: null,
      filterLocationId: null,
      filterProductId: null,
      allLocationList: [],
      locationProductList: [],

      open: false,
      // 拖拽相关
      leftWidth: 420,      // 左侧初始宽度
      dragging: false,
      startX: 0,
      startLeftWidth: 0,
      // 仓库相关
      warehouseList: [],
      warehouseDialogVisible: false,
      warehouseDialogTitle: "",
      warehouseForm: {},
      warehouseRules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }]
      },
      selectedWarehouse: null,

      // 库位相关
      locationList: [],
      locationLoading: false,
      locationDialogVisible: false,
      locationDialogTitle: "",
      locationForm: {},
      locationRules: {
        name: [{ required: true, message: "库位名称不能为空", trigger: "blur" }]
      },
      // 新增：产品相关
      selectedLocation: null,
      productList: [],
      productDialogVisible: false,
      productForm: {
        productId: null,
        quantity: null
      },
      productFormRef: null,
      allProductOptions: [],
     
      // 右侧拖拽相关
      productForm: {
        drawingNumber: null,
        version: null,
        internalVersion: null,
        productName: "",
        priority: null,
        locationAmount: null,
        remark: ""
      },
      drawingNumberOptions: [],
      versionOptions: [],
      internalVersionOptions: [],
      customerOptions: [],
    };
  },

  computed: {
    filteredLocationProductList() {
      let list = this.locationProductList;
      if (this.filterWarehouseId !== null && this.filterWarehouseId !== undefined && this.filterWarehouseId !== '') {
        list = list.filter(item => {
          // 通过 locationId 找到库位，再取 warehouseId
          const location = this.allLocationList.find(l => l.id === item.locationId);
          return location && String(location.warehouseId) === String(this.filterWarehouseId);
        });
      }
      if (this.filterLocationId !== null && this.filterLocationId !== undefined && this.filterLocationId !== '') {
        list = list.filter(item => String(item.locationId) === String(this.filterLocationId));
      }
      if (this.filterProductId !== null && this.filterProductId !== undefined && this.filterProductId !== '') {
        list = list.filter(item => String(item.productId) === String(this.filterProductId));
      }
      return list;
    }
  },

  created() {
    Promise.all([
      this.getWarehouseList(),
      this.getAllProductOptions(),
      this.getCustomerOptions(),
      this.getAllLocationList()
    ]).then(() => {
      this.getLocationProductList();
    });
  },
  mounted() {
    // 绑定全局事件
    document.addEventListener("mousemove", this.onDrag);
    document.addEventListener("mouseup", this.stopDrag);
    document.addEventListener("mousemove", this.onDragRight);
    document.addEventListener("mouseup", this.stopDragRight);
  },
  beforeDestroy() {
    // 解绑全局事件
    document.removeEventListener("mousemove", this.onDrag);
    document.removeEventListener("mouseup", this.stopDrag);
    document.removeEventListener("mousemove", this.onDragRight);
    document.removeEventListener("mouseup", this.stopDragRight);
  },

  methods: {
     // 浏览相关
     getAllLocationList() {
      return new Promise(resolve => {
        listLocation({}).then(res => {
          this.allLocationList = res.rows || [];
          resolve();
        });
      });
    },
    getLocationProductList() {
      listProductLocation({}).then(res => {
        this.locationProductList = (res.rows || []).map(item => {
          // 先通过 locationId 找到库位
          const location = this.allLocationList.find(l => l.id === item.locationId) || {};
          // 再通过库位的 warehouseId 找到仓库
          const warehouse = this.warehouseList.find(w => w.id === location.warehouseId) || {};
          // 产品信息
          const product = this.allProductOptions.find(p => p.id === item.productId) || {};
          return {
            ...item,
            warehouseName: warehouse.name || '',
            locationName: location.locationName || '',
            productName: product.productName || '',
            drawingNumber: product.drawingNumber || '',
            version: product.version || '',
            internalVersion: product.internalVersion || ''
          };
        });
      });
    },
    resetLocationFilter() {
      this.filterWarehouseId = null;
      this.filterLocationId = null;
      this.filterProductId = null;
    },

    // 仓库相关
    getWarehouseList() {
      return new Promise(resolve => {
        listWarehouse().then(res => {
          this.warehouseList = res.rows || [];
          if (this.warehouseList.length > 0) {
            this.handleWarehouseSelect(this.warehouseList[0]);
          }
          resolve();
        });
      });
    },
    handleWarehouseSelect(row) {
      // 兼容不同字段名
      this.selectedWarehouse = Object.assign({}, row);
      if (!this.selectedWarehouse.customerId && this.selectedWarehouse.relatedCustomerId) {
        this.selectedWarehouse.customerId = this.selectedWarehouse.relatedCustomerId;
      }
      this.getLocationList();
    },
    handleAddWarehouse() {
      this.warehouseForm = {};
      this.warehouseDialogTitle = "新增仓库";
      console.log('弹窗打开时客户列表:', this.customerOptions);
      this.warehouseDialogVisible = true;
      this.open = true;
    },
    handleEditWarehouse(row) {
      if (!this.customerOptions || this.customerOptions.length === 0) {
        this.getCustomerOptions();
      }
      this.warehouseForm = Object.assign({}, row);
      if (this.warehouseForm.relatedCustomerId) {
        this.warehouseForm.customerId = Number(this.warehouseForm.relatedCustomerId);
      }
      this.warehouseDialogTitle = "编辑仓库";
      this.warehouseDialogVisible = true;
    },
    handleDeleteWarehouse(row) {
      this.$confirm("确认删除该仓库吗？", "提示", { type: "warning" }).then(() => {
        delWarehouse(row.id).then(() => {
          this.$message.success("删除成功");
          this.getWarehouseList();
        });
      });
    },
    submitWarehouseForm() {
      this.$refs.warehouseForm.validate(valid => {
        if (!valid) return;
        this.warehouseForm.relatedCustomerId = this.warehouseForm.customerId;
        const api = this.warehouseForm.id ? updateWarehouse : addWarehouse;
        api(this.warehouseForm).then(() => {
          this.$message.success(this.warehouseForm.id ? "修改成功" : "新增成功");
          this.warehouseDialogVisible = false;
          this.getWarehouseList();
        });
      });
    },

    // 库位相关
    getLocationList() {
      if (!this.selectedWarehouse) {
        this.locationList = [];
        return;
      }
      this.locationLoading = true;
      listLocation({ warehouseId: this.selectedWarehouse.id }).then(res => {
        this.locationList = res.rows || [];
        this.locationLoading = false;
      }).catch(() => {
        this.locationLoading = false;
      });
    },
    handleAddLocation() {
      this.locationForm = { warehouseId: this.selectedWarehouse.id };
      this.locationDialogTitle = "新增库位";
      this.locationDialogVisible = true;
      open.value = false;
    },
    handleEditLocation(row) {
      this.locationForm = Object.assign({}, row);
      this.locationDialogTitle = "编辑库位";
      this.locationDialogVisible = true;
    },
    handleDeleteLocation(row) {
      this.$confirm("确认删除该库位吗？", "提示", { type: "warning" }).then(() => {
        delLocation(row.id).then(() => {
          this.$message.success("删除成功");
          this.getLocationList();
        });
      });
    },
    submitLocationForm() {
      this.$refs.locationForm.validate(valid => {
        if (!valid) return;
        const api = this.locationForm.id ? updateLocation : addLocation;
        api(this.locationForm).then(() => {
          this.$message.success(this.locationForm.id ? "修改成功" : "新增成功");
          this.locationDialogVisible = false;
          this.getLocationList();
        });
      });
    },
     // 拖拽相关
     startDrag(e) {
      this.dragging = true;
      this.startX = e.clientX;
      this.startLeftWidth = this.leftWidth;
      document.body.style.cursor = "col-resize";
    },
    onDrag(e) {
      if (!this.dragging) return;
      const delta = e.clientX - this.startX;
      let newWidth = this.startLeftWidth + delta;
      if (newWidth < 200) newWidth = 200;
      if (newWidth > 600) newWidth = 600;
      this.leftWidth = newWidth;
    },
    stopDrag() {
      if (this.dragging) {
        this.dragging = false;
        document.body.style.cursor = "";
      }
    },

    // 拖拽相关（右分割条）
    startDragRight(e) {
      this.draggingRight = true;
      this.startX = e.clientX;
      this.startMiddleWidth = this.middleWidth;
      document.body.style.cursor = "col-resize";
    },
    onDragRight(e) {
      if (!this.draggingRight) return;
      const delta = e.clientX - this.startX;
      let newWidth = this.startMiddleWidth + delta;
      if (newWidth < 300) newWidth = 300;
      if (newWidth > 800) newWidth = 800;
      this.middleWidth = newWidth;
    },
    stopDragRight() {
      if (this.draggingRight) {
        this.draggingRight = false;
        document.body.style.cursor = "";
      }
    },
       // 库位相关 ...原有方法不变...
       handleLocationSelect(row) {
      this.selectedLocation = row;
      this.getProductListByLocation(row.id);
    },
    getCustomerOptions() {
      return new Promise(resolve => {
        listCustomer({ 
          pageNum: 1,
          pageSize: 300
        }).then(res => {
          this.customerOptions = res.rows || [];
          resolve();
        });
      });
    },
    getProductListByLocation(locationId) {
      // 查询该库位关联的产品列表
      listProductLocation({ locationId }).then(res => {
        // 处理产品名称等字段
        this.productList = (res.rows || []).map(item => {
          const product = this.allProductOptions.find(p => p.id === item.productId);
          item.productName = product ? product.productName : item.productId;
          item.drawingNumber = product ? product.drawingNumber : '';
          item.version = product ? product.version : '';
          item.internalVersion = product ? product.internalVersion : '';
          return item;
        });
      });
    },
    getAllProductOptions() {
      return new Promise(resolve => {
        listScmProducts({}).then(res => {
          this.allProductOptions = res.rows || [];
          this.drawingNumberOptions = [...new Set(this.allProductOptions.map(item => item.drawingNumber))];
          resolve();
        });
      });
    },
    openProductDialog() {
      // 获取当前库位已关联产品ID
      const relatedProductIds = this.productList.map(item => item.productId);
      // 过滤未关联产品
      const availableProducts = this.allProductOptions.filter(item => !relatedProductIds.includes(item.id));
      // 生成可选项
      this.drawingNumberOptions = [...new Set(availableProducts.map(item => item.drawingNumber))];
      this.versionOptions = [];
      this.internalVersionOptions = [];
      this.productForm = {
        drawingNumber: null,
        version: null,
        internalVersion: null,
        productName: "",
        priority: null,
        locationAmount: null,
        remark: ""
      };
      this.productDialogVisible = true;
      // 保存可选产品到弹窗级变量，后续级联用
      this.availableProducts = availableProducts;
    }, 
    
    submitProductForm() {
      if (!this.selectedLocation) {
        this.$message.error("请先选择库位！");
        return;
      }
      if (!this.productForm.productId) {
        this.$message.error("请选择产品！");
        return;
      }
      let customerId = this.selectedWarehouse ? this.selectedWarehouse.customerId : null;
      if (!customerId && this.selectedWarehouse) {
        customerId = this.selectedWarehouse.relatedCustomerId;
      }
      if (!customerId) {
        this.$message.error("仓库未关联客户！");
        return;
      }
      const payload = {
        productId: this.productForm.productId,
        locationId: this.selectedLocation.id,
        customerId: customerId,
        priority: this.productForm.priority,
        locationAmount: this.productForm.locationAmount,
        remark: this.productForm.remark,
        quantity: this.productForm.quantity
      };
      // 编辑模式
      if (this.isEditProduct && this.productForm.id) {
        payload.id = this.productForm.id;
        updateProductLocation(payload).then(() => {
          this.$message.success("产品关联修改成功！");
          this.productDialogVisible = false;
          this.getProductListByLocation(this.selectedLocation.id);
          this.isEditProduct = false;
        });
      } else {
        // 新增模式
        addProductLocation(payload).then(() => {
          this.$message.success("产品添加成功！");
          this.productDialogVisible = false;
          this.getProductListByLocation(this.selectedLocation.id);
        });
      }
    },
    onDrawingNumberChange(val) {
      this.versionOptions = [...new Set(this.availableProducts.filter(item => item.drawingNumber === val).map(item => item.version))];
      this.productForm.version = null;
      this.internalVersionOptions = [];
      this.productForm.internalVersion = null;
      this.productForm.productName = "";
    },
    onVersionChange(val) {
      // 内版本选项只显示当前图号和版本下的内版本
      this.internalVersionOptions = [...new Set(this.availableProducts.filter(item => item.drawingNumber === this.productForm.drawingNumber && item.version === val).map(item => item.internalVersion))];
      this.productForm.internalVersion = null;
      this.productForm.productName = "";
    },
    onInternalVersionChange(val) {
      const selected = this.availableProducts.find(item =>
        item.drawingNumber === this.productForm.drawingNumber &&
        item.version === this.productForm.version &&
        item.internalVersion === val
      );
      if (selected) {
        this.productForm.productId = selected.id;
        this.productForm.productName = selected.productName;
      } else {
        this.productForm.productId = null;
        this.productForm.productName = "";
      }
    },  
    
    editProductLocation(row) {
      // 打开弹窗并填充当前行数据
      this.productForm = {
        drawingNumber: row.drawingNumber,
        version: row.version,
        internalVersion: row.internalVersion,
        productName: row.productName,
        priority: row.priority,
        locationAmount: row.locationAmount,
        remark: row.remark,
        productId: row.productId,
        quantity: row.quantity,
        id: row.id // 关键：保存关联ID用于后续API调用
      };
      this.productDialogVisible = true;
      this.isEditProduct = true; // 标记为编辑模式
    },
  
  
    // 删除产品关联
    deleteProductLocation(row) {
      this.$confirm("确认删除该产品关联吗？", "提示", { type: "warning" }).then(() => {
        delProductLocation(row.id).then(() => {
          this.$message.success("删除成功！");
          this.getProductListByLocation(this.selectedLocation.id);
        });
      });
    },

  }
};
</script>


<style scoped>
.app-container {
  height: 100vh;
}
.split-container {
  height: 100%;
}
.split-bar {
  width: 6px;
  cursor: col-resize;
  background: #bbb;
  height: 100%;
  z-index: 10;
  transition: background 0.2s;
}
.split-bar:hover {
  background: #c0c4cc;
}
.el-table .el-button {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: middle;
}
</style>